import React from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { FolderOpen, MapPin } from 'lucide-react';

export default function ProjectInfoStep({ data, onUpdate, projects, crossingPoints }) {
  const handleChange = (field, value) => {
    onUpdate({ [field]: value });
  };

  const selectedCrossingPoint = crossingPoints.find(cp => cp.id === data.crossingPointId);
  const selectedProject = projects.find(p => p.id === selectedCrossingPoint?.projectId);

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3 mb-6">
        <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
          <FolderOpen className="w-6 h-6 text-blue-600" />
        </div>
        <div>
          <h2 className="text-xl font-bold text-gray-900">项目基本信息</h2>
          <p className="text-gray-600">选择关联的项目和跨越点</p>
        </div>
      </div>

      {/* 选择跨越点 */}
      <div className="space-y-4">
        <div>
          <Label htmlFor="crossingPointId">关联跨越点 *</Label>
          <Select
            value={data.crossingPointId}
            onValueChange={(value) => {
              handleChange('crossingPointId', value);
              const point = crossingPoints.find(cp => cp.id === value);
              if (point) {
                const project = projects.find(p => p.id === point.projectId);
                handleChange('projectName', project?.name || '');
                handleChange('voltageLevel', project?.voltageLevel || '220kV');
                handleChange('location', point.crossingObject || '');
                handleChange('crossingType', point.crossingType || '');
                handleChange('constructionUnit', project?.constructionUnit || '');
                handleChange('designUnit', project?.designUnit || '');
                handleChange('supervisionUnit', project?.supervisionUnit || '');
                // 自动生成方案名称
                handleChange('name', `${point.name}施工方案`);
              }
            }}
          >
            <SelectTrigger>
              <SelectValue placeholder="选择跨越点" />
            </SelectTrigger>
            <SelectContent>
              {crossingPoints.map(point => (
                <SelectItem key={point.id} value={point.id}>
                  <div className="flex items-center gap-2">
                    <MapPin className="w-4 h-4" />
                    {point.name} - {point.crossingObject} ({point.crossingType})
                  </div>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {/* 显示关联项目信息 */}
        {selectedProject && (
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <h4 className="font-semibold text-blue-900 mb-2">关联项目信息</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
              <div><span className="text-blue-600">项目名称:</span> {selectedProject.name}</div>
              <div><span className="text-blue-600">电压等级:</span> {selectedProject.voltageLevel}</div>
              <div><span className="text-blue-600">施工单位:</span> {selectedProject.constructionUnit}</div>
            </div>
          </div>
        )}

        {/* 显示跨越点信息 */}
        {selectedCrossingPoint && (
          <div className="p-4 bg-green-50 rounded-lg border border-green-200">
            <h4 className="font-semibold text-green-900 mb-2">跨越点信息</h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
              <div><span className="text-green-600">跨越对象:</span> {selectedCrossingPoint.crossingObject}</div>
              <div><span className="text-green-600">跨越类型:</span> {selectedCrossingPoint.crossingType}</div>
              <div><span className="text-green-600">档距:</span> {selectedCrossingPoint.spanLength}m</div>
              <div><span className="text-green-600">跨越高度:</span> {selectedCrossingPoint.crossingHeight}m</div>
              <div><span className="text-green-600">难度等级:</span> {selectedCrossingPoint.difficultyLevel}</div>
              <div><span className="text-green-600">优先级:</span> {selectedCrossingPoint.priority}</div>
            </div>
            
            {/* 专项措施提示 */}
            <div className="mt-3 space-y-2">
              <h5 className="font-medium text-green-800">需要专项措施:</h5>
              <div className="flex flex-wrap gap-3 text-xs">
                {selectedCrossingPoint.requiresPowerOutage && (
                  <span className="px-2 py-1 bg-red-100 text-red-700 rounded">需要停电</span>
                )}
                {selectedCrossingPoint.requiresRoadClosure && (
                  <span className="px-2 py-1 bg-orange-100 text-orange-700 rounded">需要封路</span>
                )}
                {selectedCrossingPoint.requiresTrafficControl && (
                  <span className="px-2 py-1 bg-yellow-100 text-yellow-700 rounded">需要交通管制</span>
                )}
                {selectedCrossingPoint.requiresNavigationControl && (
                  <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded">需要停航</span>
                )}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* 方案基本信息 */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <Label htmlFor="name">方案名称 *</Label>
          <Input
            id="name"
            value={data.name}
            onChange={(e) => handleChange('name', e.target.value)}
            placeholder="输入方案名称"
          />
        </div>
        <div>
          <Label htmlFor="version">方案版本</Label>
          <Input
            id="version"
            value={data.version}
            onChange={(e) => handleChange('version', e.target.value)}
            placeholder="1.0"
          />
        </div>
      </div>

      {/* 项目参与单位信息 */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-800">项目参与单位</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="constructionUnit">施工单位</Label>
            <Input
              id="constructionUnit"
              value={data.constructionUnit}
              onChange={(e) => handleChange('constructionUnit', e.target.value)}
              placeholder="施工单位名称"
            />
          </div>
          <div>
            <Label htmlFor="designUnit">设计单位</Label>
            <Input
              id="designUnit"
              value={data.designUnit}
              onChange={(e) => handleChange('designUnit', e.target.value)}
              placeholder="设计单位名称"
            />
          </div>
          <div>
            <Label htmlFor="supervisionUnit">监理单位</Label>
            <Input
              id="supervisionUnit"
              value={data.supervisionUnit}
              onChange={(e) => handleChange('supervisionUnit', e.target.value)}
              placeholder="监理单位名称"
            />
          </div>
        </div>
      </div>

      {/* 计划工期 */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-800">计划工期</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="startDate">计划开工日期</Label>
            <Input
              id="startDate"
              type="date"
              value={data.startDate}
              onChange={(e) => handleChange('startDate', e.target.value)}
            />
          </div>
          <div>
            <Label htmlFor="endDate">计划完工日期</Label>
            <Input
              id="endDate"
              type="date"
              value={data.endDate}
              onChange={(e) => handleChange('endDate', e.target.value)}
            />
          </div>
        </div>
      </div>

      {/* 主要工作内容 */}
      <div>
        <Label htmlFor="scopeOfWork">主要工作内容</Label>
        <Textarea
          id="scopeOfWork"
          value={data.scopeOfWork}
          onChange={(e) => handleChange('scopeOfWork', e.target.value)}
          placeholder="简要描述本项目的主要施工任务和范围..."
          rows={3}
        />
      </div>
    </div>
  );
}